
<template>
  <page-container :title="false" :breadcrumb="false">
    <a-card :bordered="false">
      <div id="myChart" :style="{width: '600px',height:'600px'}" />
      <div id="radar" :style="{width: '900px',height:'600px'}" />
    </a-card>
  </page-container>
</template>

<script>
export default {
  name: 'BasicForm',
  data() {
    return {
      console: window.console,
      tabList: [
        { tab: 'pages.form.basicform.tabs.tab1', key: 'tab1' },
        { tab: 'pages.form.basicform.tabs.tab2', key: 'tab2' },
        { tab: 'pages.form.basicform.tabs.tab3', key: 'tab3' }
      ],
      tabActiveKey: 'tab1'
    }
  },
  mounted() {
    this.drawLine()
    this.radarChart()
  },
  methods: {
    handleTabChange(key) {
      this.tabActiveKey = key
      console.log('PageHeader::tabChange', key)
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        legend: {
          top: 'bottom'
        },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [10, 100],
            center: ['25%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 20
            },
            data: [
              { value: 40, name: 'rose 1' },
              { value: 36, name: 'rose 2' },
              { value: 32, name: 'rose 3' },
              { value: 30, name: 'rose 4' },
              { value: 28, name: 'rose 5' },
              { value: 26, name: 'rose 6' },
              { value: 22, name: 'rose 7' },
              { value: 18, name: 'rose 8' }
            ]
          }
        ]
      })
    },
    radarChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('radar'))
      // 绘制图表
      myChart.setOption({

        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
